<template>
  <div>
    <!-- echarts可视化图表 -->
    <el-card class="top-card">
      <div class="top">
        <div class="TodayNewMessage">
          <!-- ref="chart" -->
          <div
            ref="box"
            style="width: 1200px; height: 600px; margin: auto;"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
// 引入echarts
import * as echarts from 'echarts'
import { dataStatistics } from '@/api/adshboard'

export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getStudent()
  },
  methods: {
    async getStudent() {
      const res = await dataStatistics()
      console.log('图表数据', res)
      this.list = res.data.data
      console.log('this.list', this.list)
      // 获取 dom元素
      const dom = this.$refs.box
      // 基于指定的dom元素，实例化 echarts对象
      const myCharts = echarts.init(dom)
      // 定义一个配置项
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c}<br/>({d}%)',
          borderWidth: 0,
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: { color: '#fff' }
        },
        legend: {
          orient: 'vertical',
          right: 'right'
        },
        color: [
          '#CA8622',
          '#BDA29A',
          '#6E7074',
          '#546570',
          '#C4CCD3',
          '#C23531',
          '#2F4554',
          '#61A0A8',
          '#D48265',
          '#91C7AE',
          '#749F83'
        ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['20%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 2,
              borderColor: '#fff',
              borderWidth: 0
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.list
          }
        ]
      }

      // 应用配置项
      myCharts.setOption(option)
    }
    // console.log('this.list1', this.list1)
  }
}
</script>

<style></style>
